<template>
	<view class="content indx-s" style="padding-bottom: 45px;">
		<view class="maoboli">
			<view>
				<canvas style="width: 350px; height: 250px;" canvas-id="homeownerCanvas"
					class="homeowner-canvas_charts"></canvas>
			</view>
		</view>
		<uni-card class="uCard" :is-shadow="true" style="width:550rpx;height: 200rpx;">
			<u-row customStyle="margin-bottom: 1px">
				<u-col span="4">
					<u--text text="总资产:" bold color="#ff557f" size="18px"></u--text>
				</u-col>
				<u-col span="7">
					<u--text mode="price" :text="allMoney" bold color="#ff557f" size="18px"></u--text>
				</u-col>
				<u-col span="2" v-if="!showMoney">
					<u-icon name="../../static/font/xianshi.png" size="25" @click="changeShowMoney(true)"></u-icon>
				</u-col>
				<u-col span="2" v-if="showMoney">
					<u-icon name="../../static/font/yincang.png" size="25" @click="changeShowMoney(false)"></u-icon>
				</u-col>
			</u-row>
			<u-divider lineColor="#868686" style="height: 10px;margin-bottom: 2px;margin-top: 4px;"></u-divider>
		</uni-card>
		<view style="display: flex;width: 100%;padding-left: 15%;">
			<view><span style="font-size: 20px;font-weight: bold">资产账户</span></view>
			<view style="display: flex;padding-left: 45%;" @click="openAddAccount">
				<u-icon name="../../static/font/add.png" size="25"></u-icon>
				<span style="font-size: 20px;font-weight: bold; color: #ff557f;">添加</span>
			</view>
		</view>
		<view>
			<view v-for="(item,i) in this.parentDate">
				<uni-card :title="item.type_name" :sub-title="item.id.toString()" :extra="item.money.toString()"
					padding="10px 0" style="width: 300px;height: 100%;">
					<view v-for="(childItem,j) in item.child">
						<view style="display: flex">
							<text>{{childItem.type_name}}</text>
							<view style="width: 20px;"></view>
							<u-icon name="rmb-circle" color="#ff0000" size="15"></u-icon>
							<text>{{childItem.money}}</text>
							<view style="width: 20px;"></view>
							<view style="display: flex">
								<u-icon name="plus" color="#ff0000" size="15" @click="openAddMoney(childItem)"></u-icon>
								<view style="width: 20px;"></view>
								<u-icon name="minus" color="#0f9932" size="15"
									@click="openSubtractMoney(childItem)"></u-icon>
							</view>
						</view>
					</view>
				</uni-card>
			</view>
		</view>

		<u-popup :show="showAddType" :round="10" mode="center" overlayOpacity="0.2" customStyle="width: 80%;
		height: 200px;
		background-color: #85FFBD;
		background-image: linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%);">
			<view>
				<u--form labelPosition="left" :model="moneyType" ref="uForm">
					<u-form-item label="父节点" prop="moneyType.parentId" ref="item1" label-width="60px">
						<u--input v-model="moneyType.parentId" border="none"></u--input>
					</u-form-item>
					<u-form-item label="类别" prop="moneyType.typeName" ref="item1" label-width="60px">
						<u--input v-model="moneyType.typeName" border="none"></u--input>
					</u-form-item>
					<u-form-item label="金额" prop="moneyType.money" ref="item1" label-width="60px">
						<u--input v-model="moneyType.money" border="none"></u--input>
					</u-form-item>
				</u--form>
				<view style="display: flex;width: 50%;padding-left: 25%;">
					<u-button color="#3eefff" :plain="true" size="mini" text="确认" style="width: 40px;"
						@click="addType"></u-button>
					<u-button color="#ff557f" :plain="true" size="mini" text="取消" style="width: 40px;"
						@click="closeAddType"></u-button>
				</view>
			</view>
		</u-popup>

		<u-popup :show="showAddMoney" :round="10" mode="center" overlayOpacity="0.2" customStyle="width: 80%;
		height: 80px;
		background-color: #85FFBD;
		background-image: linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%);">
			<view>
				<u--form labelPosition="left" :model="moneyType" ref="uForm">
					<u-form-item label="金额" prop="moneyType.money" ref="item1" label-width="60px">
						<u--input v-model="moneyType.money" border="none"></u--input>
					</u-form-item>
				</u--form>
				<view style="display: flex;width: 50%;padding-left: 25%;">
					<u-button color="#3eefff" :plain="true" size="mini" text="确认" style="width: 40px;"
						@click="AddMoney()"></u-button>
					<u-button color="#ff557f" :plain="true" size="mini" text="取消" style="width: 40px;"
						@click="closeAddMoney()"></u-button>
				</view>
			</view>
		</u-popup>

		<u-popup :show="showSubtractMoney" :round="10" mode="center" overlayOpacity="0.2" customStyle="width: 80%;
		height: 80px;
		background-color: #85FFBD;
		background-image: linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%);">
			<view>
				<u--form labelPosition="left" :model="moneyType" ref="uForm">
					<u-form-item label="金额" prop="moneyType.money" ref="item1" label-width="60px">
						<u--input v-model="moneyType.money" border="none"></u--input>
					</u-form-item>
				</u--form>
				<view style="display: flex;width: 50%;padding-left: 25%;">
					<u-button color="#3eefff" :plain="true" size="mini" text="确认" style="width: 40px;"
						@click="SubtractMoney()"></u-button>
					<u-button color="#ff557f" :plain="true" size="mini" text="取消" style="width: 40px;"
						@click="closeSubtractMoney()"></u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		calc,
		fmt
	} from 'a-calc/cjs';
	import canvas from '../../util/canvas';
	import moneyService from '../../dbservice/moneyService';
	import toolUtil from '../../util/toolUtil.js';

	export default {
		data() {
			return {
				allMoney: 0,
				allMoneyChinese: '',

				showMoney: true,
				showAddType: false,
				showAddMoney: false,
				showSubtractMoney: false,

				moneyType: {
					parentId: '0',
					typeName: '',
					money: '',
					status: '1'
				},
				parentDateTemp: [],
				parentDate: [{
					"id": 5,
					"parentId": "2",
					"typeName": "余利宝",
					"money": 30,
					"status": "1",
					"child": [{
						"id": 5,
						"parentId": "2",
						"typeName": "余利宝",
						"money": 30,
						"status": "1"
					}]
				}],
				canvasData: [],
				tempItem: {},
				colorData: ["#afb4db", "#ffce7b", "#afdfe4", "#e4aebf", "#8be491", "#e46a72", "#e4e462", "#8182e4",
					"#57bfe4", "#f8aba6"
				]
			}
		},

		async onLoad() {
			this.allMoney = "999.99";
		},
		async onShow() {
			await this.getDatas();
			await this.getCanvasData();
		},
		onReady() {
			// let data = [{
			// 		"money": 50 + '万',
			// 		"value": 0.5,
			// 		"color": "#afb4db",
			// 		"title": "口红"
			// 	},
			// 	{
			// 		"money": 20 + '万',
			// 		"value": 0.2,
			// 		"color": "#ffce7b",
			// 		"title": "眼影"
			// 	},
			// 	{
			// 		"money": 10 + '万',
			// 		"value": 0.1,
			// 		"color": "#f8aba6",
			// 		"title": "粉底"
			// 	},
			// 	{
			// 		"money": 20 + '万',
			// 		"value": 0.2,
			// 		"color": "#afdfe4",
			// 		"title": "眉笔"
			// 	}
			// ];
			// // 调用外部方法并传入参数
			// canvas.canvasGraph('homeownerCanvas', data, 100);
		},

		methods: {

			async getDatas() {
				this.parentDate = [];
				//获取所有金额数据
				//查询父母目录下的所有数据				
				await moneyService.selectDateByParentId('0').then(res => {
					this.parentDateTemp = res;
				}).catch(error => console.log(error));
				for (var i = 0; i < this.parentDateTemp.length; i++) {
					await moneyService.selectDateByParentId(this.parentDateTemp[i].id).then(childRes => {
						console.log(childRes);
						this.parentDateTemp[i].child = childRes;
						this.parentDate.push(this.parentDateTemp[i]);
					}).catch(error => console.log(error));
				}
			},

			getCanvasData() {
				this.allMoney = 0;
				this.canvasData = [];
				var temp = {
					"money": 50 + '万',
					"value": 0.5,
					"color": "#afb4db",
					"title": "口红"
				}
				for (var i = 0; i < this.parentDate.length; i++) {
					var temp = {};
					var countmoney = 0;
					if (this.parentDate[i].child.length == 0) {
						countmoney = this.parentDate[i].money;
					} else {
						for (var j = 0; j < this.parentDate[i].child.length; j++) {
							countmoney = calc(countmoney + Number(this.parentDate[i].child[j].money));
						}
					}
					this.parentDate[i].money = countmoney;
					this.allMoney = calc(Number(this.allMoney) + countmoney);
					temp.money = countmoney;
					temp.color = this.colorData[i];
					temp.title = this.parentDate[i].type_name;
					temp.value = 0;
					this.canvasData.push(temp);
				}
				this.allMoneyChinese = toolUtil.convertCurrency(this.allMoney);
				//计算占比
				for (var i = 0; i < this.canvasData.length; i++) {
					this.canvasData[i].value = toolUtil.formatNumber(calc(Number(this.canvasData[i].money) / Number(this
						.allMoney)), 5);
				}
				canvas.canvasGraph('homeownerCanvas', this.canvasData, toolUtil.formatNumber(calc(Number(this.allMoney) /
					10000), 2) + '万');
			},
			openAddType() {//删
				this.showAddType = true;
			},
			closeAddType() {//删
				this.showAddType = false;
			},
			//跳转页面新增账户
			openAddAccount(){
				uni.navigateTo({
					url : "/pageSub/accountChange/addAccount" 
				});
			},
			changeShowMoney(e){
				this.showMoney = e;
				//TODO 修改数据库配置，数据包库增加配置表，改变全局配置
			},
			openAddMoney(e) {
				console.log("加法");
				console.log(e);
				this.tempItem = e;
				this.showAddMoney = true;
			},
			closeAddMoney() {
				this.showAddMoney = false;
			},
			openSubtractMoney(e) {
				console.log("减法");
				console.log(e);
				this.tempItem = e;
				this.showSubtractMoney = true;
			},
			closeSubtractMoney() {
				this.showSubtractMoney = false;
			},
			async addType() {
				//执行sql插入
				await moneyService.insertdata(this.moneyType.parentId, this.moneyType.typeName, this.moneyType.money,
					this.moneyType.status).then(res => console.log(res)).catch(error => console.log(error));
				this.closeAddType();
				await this.getDatas();
				this.getCanvasData();
			},
			async AddMoney() {
				var addMoney = calc(Number(this.tempItem.money) + Number(this.moneyType.money));
				//执行sql插入
				await moneyService.updatedata(this.tempItem.id, addMoney).then(res => console.log(res)).catch(error =>
					console.log(error));
				this.closeAddMoney();
				await this.getDatas();
				this.getCanvasData();
			},
			async SubtractMoney() {
				var subMoney = calc(Number(this.tempItem.money) - Number(this.moneyType.money));
				//执行sql插入
				await moneyService.updatedata(this.tempItem.id, subMoney).then(res => console.log(res)).catch(error =>
					console.log(error));
				this.closeSubtractMoney();
				await this.getDatas();
				this.getCanvasData();
			}
		}
	}
</script>

<style lang="scss">
	.u-form-item {
		padding-top: 3%;
		padding-left: 6%;
	}
	
	.indx {
		// background: url('../../static/image.webp');
		// background-size: cover;
		
		// background-color: #FAACA8;
		// background-image: linear-gradient(19deg, #FAACA8 0%, #DDD6F3 100%);
		
		// background-color: #FF9A8B;
		// background-image: linear-gradient(90deg, #FF9A8B 0%, #FF6A88 55%, #FF99AC 100%);
		
		// background-color: #FBDA61;
		// background-image: linear-gradient(45deg, #FBDA61 0%, #FF5ACD 100%);

		background-color: #85FFBD;
		background-image: linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%);

		height: 100%;
		width: 100%;
	}

	.maoboli {
		padding-top: 10px;
		padding-bottom: 10px;
		width: 90%;
		height: 250px;
		background: transparent;
		border: 2px solid rgba(255, 255, 255, 0.1);
		border-radius: 25px; //圆角
		background-color: rgba(255, 255, 255, 0.1); //透明度
		backdrop-filter: blur(5px); //毛玻璃效果
		background-attachment: fixed;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.wrap {
		padding: 12px;
	}

	.demo-layout {
		height: 25px;
		border-radius: 4px;
	}

	.bg-purple {
		background: #CED7E1;
	}

	.bg-purple-light {
		background: #e5e9f2;
	}

	.bg-purple-dark {
		background: #99a9bf;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>